page{
    background: rgb(245, 245, 245);
}
.pages{
}
.new-main{
    padding:50rpx 50rpx;box-sizing: border-box;position: relative;
    background: #ffffff;
    .title{
        font-size: 40rpx;color: #000;font-weight: bold;text-align: right;margin-bottom: 40rpx;
    }
    .bols{
        display: flex;justify-content: center;align-items: center;
        flex-wrap: wrap;
        .bol{
            width: 50rpx;height: 50rpx;border-radius: 50%;margin:0 6rpx 4rpx;
            display: flex;justify-content: center;align-items: center;
            font-size: 12px;color: #fff;font-weight: bold;line-height: 1;
            background: radial-gradient(#ee5c5c,#e75050);
        }
    }
    .prize{
        position: absolute;top: 30rpx;left: 30rpx;
        font-size: 12px;color: #ee5c5c;font-weight: bold;
        .nn{
            font-size: 28px;color: #e75050;
        }
    }
}
.more{
    padding: 40rpx 0;text-align: center;width: 100%;
    font-size: 12px;color: #000;opacity: 0.6;
}
.li{
    padding: 12rpx 20rpx;
    border-bottom: 1px solid #ccc;
    .head{
        width: 100%;display: flex;justify-content: space-between;align-items: center;height: 110rpx;
        .day{
            font-size: 14px;color: #000;font-weight: bold;padding: 12rpx 20rpx;box-sizing: border-box;
            .period{
                font-size: 12px;color: rgb(66, 135, 238);font-weight: normal;
            }
        }
        .time{
            font-size: 14px;color: #000;font-weight: bold;width: 100%;text-align: left;
            margin-bottom: 12rpx;
        }
        .win{
            display: flex;justify-content: flex-end;align-items: center;
            text{
                display: block;width: 40rpx;height: 40rpx;margin-right: 2px;
                border-radius: 50%;
                border: 1px solid #e0e0e0;
                text-align: center;line-height: 40rpx;
                font-size: 12px;
                &.active{
                    background: #017dd6;color: #fff;
                }
                &.active2{
                    background: #f9c301;color: #fff;
                }
            }
        }
    }
    .ul2{
        .item{
            display: flex;justify-content: flex-start;align-items: center;
            width: 84%;margin:0 auto 20rpx;
            &.no_win{
                /*grayscale(val):val值越大灰度就越深*/
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray;
            }
            &._line{
                border-bottom: 1px dashed #ee194f;padding-bottom: 20rpx;
            }
            .price{
                width: 140rpx;height: 40rpx;background: rgb(240, 240, 240);border-radius: 6px;overflow: hidden;
                font-size: 10px;color: #999;font-weight: bold;text-align: center;line-height: 40rpx;
                &.red{
                    color: red;font-size: 20px;
                }
            }
            .more2{
                font-size: 20px;color: #000;font-weight: bold;margin-left: 10rpx;width: 20rpx;
            }
            text{
                display: block;width: 50rpx;height: 50rpx;margin-right: 4px;
                border-radius: 50%;
                border: 1px solid #e0e0e0;
                text-align: center;line-height: 50rpx;
                font-size: 14px;
                &.active{
                    background: #017dd6;color: #fff;
                }
                &.type1{
                    color: red !important;
                }
                &.type2{
                    color: blue !important;
                }
                &.active2{
                    background: #f9c301;color: #fff;
                }
                &.win{
                    position: relative;
                    &::after{
                        position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%);
                        display: block;content: '';
                        width: 20px;height: 4px;background: red;
                    }
                }
            }
        }
    }
    .value{
        display: flex;justify-content: flex-start;align-items: center;
        flex-wrap: wrap;
        padding: 0 40rpx;
        box-sizing: border-box;
        .qq{
            width: 60rpx;height: 50rpx;border-radius: 50%;display: inline-block;
            display: flex;justify-content: center;align-items: center;
        }
    }
}

.add-pop{
    position: fixed;top: 0;left: 0;right: 0;bottom: 0;
    background: rgba(0, 0, 0,0.6);width: 100%;height: 100%;
    .add-pop-content{
        position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);
        background: #ffffff;width: 700rpx;border-radius: 30rpx;overflow: hidden;
        padding: 0 20rpx;
        box-sizing: border-box;
        .close-icon{
            position: absolute;top: 0;right: 0;width: 100rpx;height: 100rpx;
            text-align: center;line-height: 100rpx;
            font-size: 20px;color: #000;
        }
        .title{
            padding: 40rpx 0;text-align: center;
            font-size: 20px;color: #000000;font-weight: bold;
        }
        .tip{
            padding: 10rpx 50rpx;box-sizing: border-box;
            font-size: 16px;color: red;font-weight: bold;
        }
        .tip2{
            padding: 10rpx 50rpx;box-sizing: border-box;
            font-size: 16px;color: blue;font-weight: bold;
        }
        .mian{
            padding: 20rpx 20rpx;box-sizing: border-box;
            display: flex;justify-content: flex-start;align-items: center;
            flex-wrap: wrap;
            .li{
                width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;
                border: 1px solid #cfcfcf;box-sizing: border-box;
                border-radius: 4px;
                font-size: 16px;color: #000;margin-right: 24rpx;margin-bottom: 20rpx;
                &:nth-of-type(8n+8){ margin-right: 0; }
                &.current1{
                    background: rgb(236, 55, 55);
                    border: 0;color: #ffffff;font-weight: bold;
                }
                &.current2{
                    background: rgb(47, 50, 226);
                    border: 0;color: #ffffff;font-weight: bold;
                }
            }
        }
        .submit{
            display: flex;justify-content: center;align-items: center;margin-bottom: 30rpx;
        }
    }
}